<template>
  <div :class="prefixCls">
    <div v-for="(item, index) in schema" :key="index" :class="[prefixCls + '-item']">
      <div :class="[prefixCls + '-title']">
        <sh-title v-if="item.title" :prefix="showPrefix(item)">
          {{ item.title }}
          <slot :name="item.labelSlot" />
        </sh-title>

        <div v-if="item.showExpand" class="expand-btn" @click="onExpand(item)">
          <span v-if="isExpand">
            展开
            <Icon type="ios-arrow-down" />
          </span>
          <span v-else>
            收起
            <Icon type="ios-arrow-up" />
          </span>
        </div>
      </div>

      <sh-description-row :gutter="getGutter(item)" :itemList="item.itemList" :data="data">
        <template v-for="v in getSlots(item.itemList)" #[v.slot]>
          <slot :name="v.slot" :item="v" />
        </template>
      </sh-description-row>
      <!-- <slot :name="item.slot"></slot> -->
      <slot />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useComputed } from './utils/useComputed';
import ShDescriptionRow from './description-row.vue';
import { useDependencyInjection } from '../../utils/useDependencyInjection';

const prefixCls = 'sh-description';
const isExpand = ref(true);
const props = defineProps({
  schema: {
    type: Array,
    default: () => {
      return [];
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  colon: {
    type: Boolean,
    default: true,
  },
  prefix: {
    type: Boolean,
    default: true,
  },
  gutter: {
    type: Number,
    default: 20,
  },
});

const { setProvide } = useDependencyInjection();
setProvide(['desc'], {
  desc: props,
});

const { showPrefix, getGutter, getSlots } = useComputed(props);

const onExpand = item => {
  isExpand.value = !isExpand.value;
  item.itemList.forEach(e => {
    if (e.hasOwnProperty('hidden')) {
      e.hidden = !e.hidden;
    }
  });
};
</script>
